<template>
    <basic-container>
        <TitleComponent mainTitle="商品分类" subTitle="列表" />
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @row-del="rowDel" @on-load="onLoad">
            <template #name-form="">
                <el-input v-model="crudData.form.name" style="max-width: 600px" placeholder="Please input"
                    class="input-with-select">
                    <template #prepend>
                        <el-icon><EditPen /></el-icon>
                    </template>
                </el-input>
            </template>
            <template #sort="{ row }">
                <div class="order">
                    <el-popover :visible="row.visible" placement="right" :width="200" trigger="click">
                        <template #reference>
                            <a style="color: #4e9876; border-bottom: dashed 1px #4e9876;" href="javascript:void(0);"
                                @click="row.visible = true"> {{
                                    row.sort
                                }}</a>
                        </template>
                        <div class="hover_box">
                            <el-input v-model="row.sort" placeholder=""></el-input>
                            <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
                                <el-button type="" class="btn" @click="row.visible = false">取消</el-button>
                                <el-button color="#4E9876" @click="orderSubmit(row)">提交</el-button>
                            </div>
                        </div>
                    </el-popover>

                </div>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from "@/components/title/index.vue";

const form = ref({})
let option: any = reactive({
    rowKey: 'id',
    height: 'auto',
    // calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: true,
    delBtn: true,
    addBtn: true,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: true,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    align: 'center',
    column: [
        {
            label: "ID",
            prop: "ID",
            sortable: true,
            width: 100,
            order: 2,
            addDisplay: false,
            span: 24,
        },
        {
            label: "名称",
            prop: "name",
            order: 2,
            width: 100,
            span: 24,
            rules: [
                {
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur',
                },
            ],
        },
        {
            label: "排序",
            prop: "sort",
            width: 100,
            order: 1,
            span: 24,
            type: 'number',
            controlsPosition: 'top',
            sortable: true,

        },
        {
            label: "图片",
            prop: "img",
            type: 'upload',
            width: 210,
            order: 2,

            dragFile: true,
            limit: 1,
            propsHttp: {
                res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload',
            span: 24,
        },
        {
            label: "创建时间",
            prop: "time",
            type: 'datetime',
            disabled: true,
            addDisplay: false,
            span: 24,
        },
        {
            label: "更新时间",
            prop: "update",
            type: 'datetime',
            disabled: true,
            addDisplay: false,
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loading: true,
    form: {},
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    data: []
})
// 序号按钮提交
const orderSubmit = (row: { visible: boolean; }) => {
    row.visible = false
    console.log('row====', row);
}
// 删除
const rowDel = (form, index, done) => {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage.success("删除成功");
            done(form); // 删除逻辑，此处暂未实现删除功能
        })
        .catch(() => { });
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '9411',
            name: 'Youtube',
            sort: '7',
            img: 'https://jumptra.vip//uploads/images/youtube.png',
            time: '2021-11-05 10:19:49',
            update: '2022-12-14 01:42:51',
        },
        {
            ID: '9412',
            name: 'Youtube',
            sort: '71',
            img: 'https://jumptra.vip//uploads/images/lrauahq17wsityqljz4e.png',
            time: '2021-11-05 10:19:49',
            update: '2022-12-14 01:42:51',
        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
::v-deep span.avue-crud__img {
    width: 200px;
    height: 200px;
    display: block;

    img {
        width: 90%;
        height: 90%;
        object-fit: cover;
    }
}

// ::v-deep .el-input-group__prepend{
//   padding: 0 15px;
// }
</style>